<template>
  <div class="wrapper">
    <div class="image">
      {{ name }}
    </div>
    <div class="company">
      <div class="main">
        <div class="name">{{ list.ceEtpname }}</div>
        <el-rate v-if="list.xj" class="rate" disabled v-model="stars" />
        <el-tag v-if="list.cusScaleId" class="tag" type="success">{{
          cusScaleIdFilter
        }}</el-tag>
        <el-tag v-if="list.custype" class="tag" type="primary">{{
          custypeFilter
        }}</el-tag>
      </div>
      <div class="desc">
        <span class="code-label">统一社会信用代码:</span>
        <span class="code-value">{{ list.ceTaxcode }}</span>
      </div>
      <div class="info">
        <el-row :gutter="20">
          <el-col :span="7">
            <span class="info-label">企业联系人：</span
            ><span>{{ list.ceContactname }}</span>
          </el-col>
          <el-col :span="10">
            <span class="info-label">联系电话：</span
            ><span>{{ list.ceContactmobile1 }}</span>
            <el-popover placement="bottom" width="200" trigger="hover">
              <div
                v-for="(phone, index) in list.ceContactmobiles"
                :key="index"
                style="margin-bottom: 5px"
              >
                <span style="margin-right: 10px; color: #aaaaaa"
                  >联系人{{ index + 1 }}:</span
                >
                <span>{{ phone }}</span>
              </div>
              <template>
                <el-button
                  v-if="list.ceContactmobiles.length > 0"
                  style="padding: 0; margin-left: 10px"
                  name="reference"
                  type=""
                  text
                  size="small"
                  :disabled="list.ceContactmobiles.length <= 1"
                >
                  更多
                </el-button>
              </template>
            </el-popover>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="7">
            <span class="info-label">所属服务单位：</span>
            <span>{{ list.cityName }}</span>
          </el-col>
          <el-col :span="6">
            <span class="info-label">所属片区：</span>
            <span>{{ list.regionName }}</span>
          </el-col>
          <el-col :span="6">
            <span class="info-label">客户经理：</span
            ><span>{{ list.khjlname || '无' }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <span class="info-label">地址：</span
            ><span>{{ list.ceOfficeaddr }}</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="opera">
      <el-button type="primary" @click.stop="handleOrder"
        ><el-icon><ShoppingCart /></el-icon>去销售</el-button
      >
      <el-button>
        <el-icon><Star /></el-icon> 去服务</el-button
      >
    </div>
  </div>
</template>

<script setup>
import arr from './logoinfo'
import { reactive, getCurrentInstance, computed, toRefs } from 'vue'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance()
const route = useRouter()
const props = defineProps({
  list: {
    type: Object,
    required: true
  }
})
const custypeFilter = computed(() => {
  const filter = {
    0: '一般产品客户',
    1: '代账公司',
    2: '重点客户'
  }
  return filter[+props.list.custype]
})

const cusScaleIdFilter = computed(() => {
  const filter = {
    0: '一般纳税人',
    1: '小规模纳税人',
    2: '点下户',
    3: '非纳税人'
  }
  return filter[+props.list.custype]
})

let data = reactive({
  name: props.list.ceEtpname,
  stars: props.list.xj,
  base: [
    [
      { label: '纳税人识别号', value: '' },
      { label: '企业名称', value: '' },
      { label: '所属服务单位', value: '' }
    ],
    [
      { label: '所属地区', value: '' },
      { label: '所属片区', value: '' },
      { label: '所属税务机关', value: '' }
    ],
    [
      { label: '注册资本', value: '' },
      { label: '客户分类', value: '一级' },
      { label: '二级', value: '三级' }
    ]
  ]
})
let { name, base, stars } = toRefs(data)

init()

function init() {
  let province = arr.province // xx省 json数据
  let cities = arr.cities // xx市 json数据
  let companySuffixes = arr.company_suffixes // xxxx 后缀json数据

  let length = name.value.length // name值为以上列举的企业名称
  if (length <= 4) {
    return name.value
  }

  let nameList = [] // 储存企业名称过滤后的字符串数组集合
  for (let i = 0; i < province.length; i++) {
    let prefix = province[i]
    if (name.value.startsWith(prefix)) {
      // 以 xxxx省 开头
      let nameSub = name.value.substring(prefix.length)
      nameList.push(nameSub)
    } else {
      nameList.push(name.value)
    }
  }
  name.value = getStrLenShort(nameList)
  let nameList1 = [] // 储存企业名称过滤后的字符串数组集合
  for (let i = 0; i < cities.length; i++) {
    let prefix = cities[i]
    if (name.value.startsWith(prefix)) {
      // 以 xxxx市 开头
      let nameSub = name.value.substring(prefix.length)
      nameList1.push(nameSub)
    } else {
      nameList1.push(name.value)
    }
  }
  name.value = getStrLenShort(nameList1)

  let nameList2 = [] // 储存企业名称过滤后的字符串数组集合
  for (let i = 0; i < companySuffixes.length; i++) {
    let suffix = companySuffixes[i]
    if (name.value.endsWith(suffix)) {
      // 以 xxxx 结尾
      let substring = name.value.substring(0, name.value.length - suffix.length)
      nameList2.push(substring)
    } else {
      nameList2.push(name.value)
    }
  }
  name.value = getStrLenShort(nameList2)

  if (name.value.includes('（')) {
    name.value = name.value.split('（')[0]
  }

  if (name.value.length > 4) {
    name.value = name.value.substring(0, 4)
  }
}

function handleOrder() {
  route.push({
    path: '/xs/xzdd',
    query: { cusId: props.list.cusId, flag: 'goSale' }
  })
}

function getStrLenShort(nameList) {
  let tempName = ''
  if (nameList.length > 0) {
    tempName = nameList[0]
    let temp = ''
    for (let i = 1; i < nameList.length; i++) {
      temp = nameList[i]
      if (tempName.length > temp.length) {
        tempName = temp
      }
    }
  }
  return tempName
}
</script>

<style scoped lang="scss">
.el-row {
  margin-right: 0 !important;
}

.wrapper {
  width: 100%;
  background-color: white;
  // min-width: 1050px;
  padding: 25px 35px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  //border: 1px solid lightgray;
  margin-bottom: 15px;
  box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 7%);

  .image {
    align-items: center;
    //display: inline-block;
    margin-right: 30px;
    text-align: center;
    width: 100px;
    min-width: 100px;
    min-height: 100px;
    height: 100px;
    font-size: 24px;
    padding: 18px;
    //font-weight: 600;
    user-select: none;
    color: white;
    border-radius: 8px;
    background-color: rgb(47, 119, 204);
  }

  .company {
    flex: 1;
    //display: inline-block;
    align-items: center;
    width: 550px;

    .main {
      display: flex;
      align-items: center;
      margin-bottom: 6px;

      .name {
        display: inline-block;
        font-weight: 600;
        font-size: 22px;
        margin-right: 15px;
      }

      .rate {
        display: inline-block;
        margin-right: 15px;
      }

      .tag {
        display: flex;
        align-items: center;
        margin-right: 10px;
      }
    }

    .desc {
      font-size: 13px;
      margin-bottom: 15px;

      .code-label {
        color: #aaaaaa;
        margin-right: 10px;
      }
    }

    .info {
      font-size: 14px;
      // width: 620px;
      // max-width: 620px;
      line-height: 24px;

      .info-label {
        color: #aaaaaa;
        //margin-right: 5px;
      }
    }
  }

  .opera {
    display: flex;
    justify-content: center;
    align-items: center;
    .el-icon {
      margin-right: 5px;
    }
    // width: 300px;
    // min-width: 300px;
    // float: right;
    //display: inline-block;
  }
}

.wrapper:hover {
  cursor: pointer;
  box-shadow: 0 4px 12px rgb(40 120 255 / 11%), 0 3px 14px rgb(0 0 0 / 11%);
}
</style>
